<%--
  User: cxs
  Date: 2021/10/3 15:24
  @Version 1.0
  @Motto:放下杂念,只为迎接明天更好的自己
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>在线问答</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/dayjs.min.js"></script>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
        }
        .all{
            width: 60%;
            padding-top: 30px;
            box-sizing: border-box;
            margin: 0 auto;
        }
        .all .header{
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 25px;
            font-weight: 600;
            text-align: center;
            letter-spacing: 25px;
            text-indent: 25px;
            font-family: 华文楷体;
        }
        .all .newquest{
            display: block;
            width: 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
        table{
            width: 80%;
            margin: 0 auto;
        }
        table tr{
            height: 30px;
        }
        table tr td{
            text-align: center;
        }
        table tr td>a:hover{
            color: red;
        }
        .special{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="all">
        <header class="header">
            <div>在线问答</div>
        </header>
        <a href="${pageContext.request.contextPath}/question.jsp" target="_self" class="newquest">我要提问</a>
        <table id="table">
            <thead>
                <tr style="background-color: cornflowerblue">
                    <th width="10%">序号</th>
                    <th width="40%">问题</th>
                    <th width="20%">回答次数</th>
                    <th width="30%">最后修改</th>
                </tr>
            </thead>
        </table>
    </div>
    <script type="text/javascript">
        let reload = function (data){
            let table = $("#table");
            table.append("<tbody id='bd'></tbody>")
            let bd = $("#bd");
            if(data != null && data.length > 0){
                $.each(data,(index,obj) => {
                    let tr = $("<tr></tr>");
                    if(index % 2 != 0) tr = $("<tr class='special'></tr>");
                    tr.append("<td>"+(index + 1)+"</td>")
                        .append("<td><a href='${pageContext.request.contextPath}/question/questionDetail?id="+obj.id+"'>"+obj.title+"</a></td>")
                        .append("<td>"+obj.answerCount+"</td>")
                        .append("<td>"+dayjs(obj.lastModified).format('YYYY-MM-DD HH:mm:ss')+"</td>");
                    tr.appendTo(bd);
                })
            }
        }

        window.onload = function (){
            // 请求数据
            $.ajax({
                url : '${pageContext.request.contextPath}/question/list',
                type : 'get',
                dataType : "json",
                success : resp => {
                    if(resp.code === 200){
                        reload(resp.data);
                    }
                }
            })
        }
    </script>
</body>
</html>
